import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';
import Banner from 'COMPONENT/Banner';
import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import client from 'UTIL/native'
import { Carousel, WingBlank, SearchBar, Grid } from 'antd-mobile';

import {
  Icon,
  TabBar,
  Modal,
  Toast
} from 'antd-mobile'
import {Link} from 'react-router'



const rentData = [
	{title:'保证金圈存',img:'ershoufang',
		path:'http://wepay.test.bankcomm.com/services/houseapp/live/#/deposit',
		jumpType:'1',menuCode:''},
	{title:'首付款划扣',img:'haiwai',
		path:'http://wepay.test.bankcomm.com/services/houseapp/live/#/signPersonAgreement',
		jumpType:'1',menuCode:''},
	{title:'房贷申请',img:'lvju',path:'/Mine/HouseLoanApply',jumpType:'0',menuCode:''},
	{title:'征信授权',img:'maifang',jumpType:'0',menuCode:'0003',path:'/Mine/Credit'},
	{title:'资金托管',img:'xiaoqu',path:'',jumpType:'0',menuCode:''},
	{title:'维修资金缴交',img:'xinfang',
		path:'http://wepay.test.bankcomm.com/services/houseapp/maintenace-fund/#/writeSearch',
		jumpType:'1',menuCode:''},
	//{title:'维修资金使用',img:'zhuangxiu',jumpType:'1',menuCode:'',path:'http://wepay.test.bankcomm.com/services/cloud/resources/reap-realestate-rent/customer/index.html#/home?openId=1234'},
	{title:'维修资金使用',img:'zhuangxiu',
		jumpType:'1',menuCode:'',
		path:'http://wepay.test.bankcomm.com/services/houseapp/maintenace-fund/#/applyUse'},
	{title:'物业缴费',img:'zufang',
		path:'http://wepay.test.bankcomm.com/services/houseapp/live/#/propertyPayment',
		jumpType:'1',menuCode:''},
	{title:'生活缴费',img:'ershoufang',path:'',jumpType:'0',menuCode:''},
	{title:'我要租房',img:'lvju',path:'/RentHouse',jumpType:'0',menuCode:''},
	{title:'公积金租房提取',img:'ershoufang',path:'',jumpType:'0',menuCode:''},
	{title:'更多',img:'moreCate',path:'/Mine',jumpType:'0',menuCode:''}
]
//'首付款划扣','房贷申请','征信授权','资金托管','维修资金缴交','维修资金使用','物业缴费','生活缴费','我要租房','公积金租房提取','更多'


const data = Array.from(new Array(rentData.length)).map((_val, i) => ({
  icon:'./imgs/'+rentData[i]['img']+'.png',
  text: rentData[i]['title'],
  path: rentData[i]['path'],
  jumpType:rentData[i]['jumpType'],
  menuCode:rentData[i]['menuCode']
}));





export default class Home extends React.Component {
	static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);
    client();
		
		//判断有无登录
		let isLogIn = localStorage.getItem('isLogIn');
		if(!isLogIn){
			localStorage.setItem('isLogIn',"false");
		}
		
		
    this.state = {
      list: [],
      thirdData:[
			'resoldApartment',
			'resoldApartment',
			'resoldApartment',
			'resoldApartment'
		],
      data: ['1', '2', '3'],
      value:'搜索',
    	imgHeight: 176,
      integralLen:null,
      bannerList:[
      	{'messageId':'1','cover':'banner2.png'},
      	{'messageId':'1','cover':'banner3.png'},
      	{'messageId':'1','cover':'banner2.png'},
      	{'messageId':'1','cover':'banner3.png'},
      	{'messageId':'1','cover':'banner2.png'}
      ],
      generalizeList:[
      	{'messageId':'1','cover':'banner3.png'},
      	{'messageId':'1','cover':'banner2.png'},
      	{'messageId':'1','cover':'banner3.png'}
      ],
      url:sessionStorage.getItem('url') || 'go.png',
    	batch:localStorage.getItem('batch') || '1'
      
    }

  }



  componentWillMount() {

  }

	componentDidMount () {
		setTimeout(() => {
      this.setState({
        data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
      });
    }, 100);
	}
	

	
	
	getMore = (event,el) =>{


		let text = event['text'];
		let type = event['jumpType'];
		let path = event['path'];
		if(type=='1'){
			if(path){
				native.call({
			   	'fun':'newPage',
			   	'param':{
			   		'url':path,
			   		'title': text,
			   		'menuCode':'menuCode'
			   	}
				})
			}else{
				return false;
			}
			
		}else if(type=='0'){
			if(path){
				this.context.router.push({
		    	pathname: path
		    })
			}else{
				return false;
			}
			
		
		}
		
	}
 
	
	//扫描二维码
 	scanErCode = () => {
 		let _this = this;
 		native.call({
	    'fun':'scanERCode',
	    'callBack':function(backData){
	   			if(backData['codeString']){
	   				localStorage.setItem('scanResult', backData['codeString']);
	   				_this.context.router.push({
							pathname: '/Result'
						})
	   			}
	    }
	  })
 	}


  render() {
    let {list, thirdData} = this.state;
  	let token = localStorage.getItem('userAuthToken')
		let _this = this;
		
    return (
      <div>

      	<div 
        	style={{
        		display:'flex',alignItems: 'center',padding:' 0 .2rem ',height: '1rem',  overflow: 'hidden'

        		}}
        >
        	<div style={{width:'6.3rem'}}>
	        	 <SearchBar placeholder="Search" maxLength={8} />
        	</div>
        	<div style={{width:'.5rem'}} onClick={this.scanErCode.bind(this)}>
        		<img style={{width:'.5rem',marginLeft:'.2rem'}} src='./imgs/scan.png' 
        		
        		/>
        	</div>
        </div>

				
        <div className='banner'>

          <Banner  bannerList={this.state.bannerList}/>
          
          <Grid data={data} hasLine={false} 
          onClick={(el,index) =>{_this.getMore(el,index)}} 
          />
          
          
        </div>
        <div 
        	style={{
        		display:'flex',alignItems: 'center',padding:' 0 .2rem ',height: '1rem',  overflow: 'hidden'

        		}}
        >
        	<div>
        	<img style={{width:'.6rem'}} src='./imgs/notice.png' 
        		
        	/>
        	</div>
        	<div style={{width:'5rem'}}>
        		<Carousel className="my-carousel"
                      vertical
                      dots={false}
                      dragging={false}
                      swiping={false}
                      autoplay
                      infinite
            >
                <div className="v-item">
                    <div>格调阳台这样装</div>
                    <div>阳台这样装，住宅多出一间功能房</div>
                </div>
                <div className="v-item">
                    <div>小户型秘诀</div>
                    <div>小家越住越大，业主的收纳秘密武器</div>
                </div>
                <div className="v-item">
                    <div>想买到更保值的房子?你得知道租售比</div>
                    <div>房屋的套内建筑面积是什么？</div>
                </div>
            </Carousel>
        	</div>
        </div>
        

        <img src='./imgs/banner4.png' alt="" width="100%" style={{height:'2rem'}} />
        <img src='./imgs/banner2.png' alt="" width="100%" style={{height:'2rem'}} />
        <img src='./imgs/head_bg.png' alt="" width="100%" style={{height:'2rem'}}  />

				

		    

        <div style={{height:'1.03rem'}}>
        <FootTabBar selectedTab='blueTab' url={this.state.url}/>
        </div>
      </div>
    );
  }
}
